<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <a-alert
        :closable="true"
        message="确认消费后，资金将转入商家账户，无法退回。"
        style="margin-bottom: 24px;"
      />
      <a-form-item
        label="消费备注"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText"
      >
        {{ formValues.remark }}
      </a-form-item>
      <a-form-item
        label="消费金额"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText"
      >
        ￥ {{ formValues.consumeAmount }}
      </a-form-item>
      <a-form-item
        label="会员等级"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText"
      >
        {{ discount.level }}
      </a-form-item>
      <a-form-item
        label="会员折扣"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText"
      >
        {{ discount.discount * 100 }}%
      </a-form-item>
      <a-form-item
        label="实际金额"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText"
      >
        ￥ {{ discount.discount * formValues.consumeAmount }}
      </a-form-item>
      <a-divider />
      <a-form-item
        label="支付密码"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText"
      >
        <a-input
          type="password"
          style="width: 80%;"
          v-decorator="['paymentPassword', {rules: [{required: true, message: '请输入该账户密码'}] }]" />
      </a-form-item>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import md5 from 'md5'
import orderApi from '@/api/order'

export default {
  name: 'Step2',
  props: [
    // eslint-disable-next-line vue/require-prop-types
    'formValues'
  ],
  data () {
    return {
      discount: {},
      consumeVo: {},
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: this.$form.createForm(this),
      loading: false,
      timer: 0
    }
  },
  created () {
    orderApi.getDiscount().then(res => {
      this.discount = res.data
    })
  },
  methods: {
    nextStep () {
      const that = this
      const { form: { validateFields } } = this
      that.loading = true
      validateFields((err, values) => {
        if (!err) {
          Object.assign(this.consumeVo, this.formValues)
          this.consumeVo.paymentPassword = md5(values.paymentPassword)
          orderApi.consume(this.consumeVo).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success(res.message)
              that.loading = false
              this.formValues.level = this.discount.level
              this.formValues.discount = this.discount.discount
              this.formValues.actualAmount = this.discount.discount * this.formValues.consumeAmount
              that.$emit('nextStep', this.formValues)
            } else {
              that.loading = false
              this.$message.error(res.message)
            }
          })
        } else {
          that.loading = false
        }
      })
    },
    prevStep () {
      this.$emit('prevStep', this.formValues)
    }
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  }
}
</script>

<style lang="less" scoped>
.stepFormText {
  margin-bottom: 24px;

  .ant-form-item-label,
  .ant-form-item-control {
    line-height: 22px;
  }
}

</style>
